<template>
	<view class="container">
		<u-form :model="form" ref="uForm" label-position="top" :error-type="['toast']">
			<u-form-item label="教保师选择" prop="staffName">
				<u-input type="select" placeholder="请选择教保师" v-model="form.staffName" @click="staffShow = true"/>
			</u-form-item>
			<u-form-item label="评分" prop="rankVal">
				<u-rate :count="5" v-model="form.rankVal"></u-rate>
			</u-form-item>
			<u-form-item label="评语" prop="content">
				<u-input placeholder="请填写评语" v-model="form.content"/>
			</u-form-item>
			<u-form-item label="标签" prop="content">
				<view>
					<u-tag
						v-for="(tag, index) in tags.dynamicTags"
						:key="index"
						class="tag"
						closeable
						:disable-transitions="false"
						@close="handleTagClose(tag)"
						:text="tag" 
						type="success"/>
					<view class="tag-input">
						<u-input 
							v-if="tags.inputVisible"
							v-model="tags.inputValue"
							ref="saveTagInput"
							@keyup.enter.native="handleTagInputConfirm"
							@blur="handleTagInputConfirm"
							:border="true" />
						<u-button v-else size="mini" @click="showTagInput">添加</u-button>
					</view>
				</view>
			</u-form-item>
			<u-form-item label="照片">
				<u-upload ref="uUpload"
					:action="action"
					:form-data="formData"
					:header="header"
					@click="addClick()"
					@on-uploaded="onUploaded"
					@on-error="onError"
					:file-list="fileList"
					:auto-upload="false"
					:custom-btn="false">
				</u-upload>
			</u-form-item>
			<u-button class="action-view" @click="saveClick">匿名评价</u-button>
		</u-form>
		<u-select :list="staffList" v-model="staffShow" label-name="realName" @confirm="staffClick"></u-select>
	</view>
</template>

<script>
	import { getStaffRankList, addStaffRank } from '@/api/common.js'
	import { http } from '@/api/service.js'
	export default {
		data() {
			return {
				form: {
					staffId: '',
					staffName: '',
					rankVal: '',
					content: ''
				},
				staffShow: false,
				staffList: [],
				
				rules: {
					staffName: [{
						required: true,
						message: '请选择教保师',
					}],
					rankVal: [{
						required: true,
						message: '请选择教保师的评分',
					}],
					content: [{
						required: true,
						message: '请填写教保师的评语',
					}]
				},
				
				fileList: [],
				action: '',
				formData: {
					'bizType': 'staff_rank'
				},
				header: {
					ticket: '',
				},
				
				tags: {
					dynamicTags: [],
					inputVisible: false,
					inputValue: ''
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {
			this.getStaffList();
			
			this.action = `${http.config.baseURL}wx/api/upload/file`;
			this.header.ticket = uni.getStorageSync('ticket');
		},
		methods: {
			showTagInput () {
				const { tags } = this
				tags.inputVisible = true
				this.tags = { ...tags }
				// this.$nextTick(_ => {
				// 	this.$refs.saveTagInput.$refs.input.focus()
				// })
			},
			handleTagInputConfirm () {
				const { tags } = this
				const inputValue = tags.inputValue
				if (inputValue) {
					tags.dynamicTags.push(inputValue)
				}
				tags.inputVisible = false
				tags.inputValue = ''
				this.tags = { ...tags }
			},
			handleTagClose (tag) {
				const { tags } = this
				tags.dynamicTags.splice(tags.dynamicTags.indexOf(tag), 1)
				this.tags = { ...tags }
			},
			saveClick() {
				this.$refs.uForm.validate(valid => {
					console.log(valid);
					if (valid) {
						if (this.tags.dynamicTags.length === 0) {
							this.$u.toast('请增加评价标签');
							return;
						}
						uni.showLoading({})
						this.$refs.uUpload.upload();
						return;
					}
				});
			},
			
			addRecord() {
				const { tags } = this;
				const { staffId, content, rankVal, resURLs } = this.form;
				const params = {
				  content,
				  staffId,
				  rankVal,
				  resURLs,
				  tags: tags.dynamicTags.join('|')
				}
				console.log(params);
				addStaffRank(params).then(res => {
					console.log(res);
					this.$u.toast('评价成功');
					setTimeout(function(){
						uni.navigateBack()
					},1000)
				})
			},
			
			staffClick(res) {
				console.log(res);
				const index = res[0].index;
				this.form.staffName = this.staffList[index].realName;
				this.form.staffId = this.staffList[index].id;
			},
			
			getStaffList() {
				getStaffRankList().then(res => {
					console.log(res);
					this.staffList = res.data;
				})
			},
			
			onUploaded(lists, name) {
				console.log(lists);
				console.log(name);
				let resourceUrl = lists.map(x => {
					return x.response.data;
				}).join('|');
				console.log(resourceUrl);
				this.form.resURLs = resourceUrl;
				// this.form.resURLs = 'https://saas.res.dotflat.cn/teach/file/live_record/img/2021-12-25_11-07-29-972.png|https://saas.res.dotflat.cn/teach/file/live_record/img/2021-12-25_11-07-30-248.png';
				this.addRecord();
			},
			
			onError(res, index, lists, name) {
				uni.hideLoading();
				this.$u.toast('图片上传失败');
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: $app-page-bg-color;
	}
</style>
<style lang="scss">
	@import '@/css/u-form.scss';
	
	.container {
		padding-left: 30rpx;
		padding-right: 30rpx;
	}
	.tag{
		margin-right: 10rpx;
	}
	.tag-input{
		
	}
</style>
